<template lang="pug">
  .clearfix
    Modal(
      width="480"
      v-model="isShowPayModal"
      title="确认付款"
      class-name="vertical-center-modal"
    )
      .search-form
        Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="100")
          FormItem.form-item.ivu-col.pr-20(v-for="(item, index) of setFormItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled")
            template(v-if="item.type === 'select'")
              Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.bankName"
                  :key="index"
                ) {{ c_item.bankName }}
            template(v-if="item.type === 'datePicker'")
              DatePicker.w-100(v-model="formData[item.model]" placeholder="请选择" type="date" format="yyyy-MM-dd" @on-change="handleChangeDatePicker(item.model, $event)")

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="confirmPay" :loading="!isCanSubmit") 确定
</template>

<script>
import { SalaryPayableBillApi } from '@/api/SalaryPayableBill.api.js'
import { SocialSecurityPayableBillApi } from '@/api/SocialSecurityPayableBill.api.js'
import { ProvidentFundPayableBillApi } from '@/api/ProvidentFundPayableBill.api.js'
import { CommercialPayableBillApi } from '@/api/CommercialPayableBill.api.js'
import { OrganizationBankApi } from '@/api/OrganizationBank.api.js'
import { Common } from '@/utils/common.js'
export default {
  name: '',

  props: {
  },

  computed: {
    setFormItem () {
      if (this.modalType === 'salary') {
        this.formItem[0].isDisabled = false
      } else {
        this.formItem[0].isDisabled = true
      }
      return this.formItem
    }
  },

  components: {
  },

  data () {
    const validateAmount = (rule, value, callback) => {
      if (value > this.queryAmount) {
        callback(new Error('付款金额不能大于剩余应付金额'))
      } else {
        callback()
      }
    }
  
    return {
      organizationName: '',
      isShowPayModal: false,
      queryAmount: '',
      formData: {
        amount: '',
        payDate: new Date(),
        bankName: '',
        periodYear: '',
        periodMonth: ''
      },
      formItem: [
        { type: 'input', label: '付款金额', placeholder: '请输入付款金额', prop: 'amount', model: 'amount', style: 'ivu-col-span-24', files: [], isDisabled: true },
        { type: 'datePicker', label: '付款时间', placeholder: '请选择付款时间', prop: 'payDate', model: 'payDate', style: 'ivu-col-span-24' },
        { type: 'select', label: '付款银行', placeholder: '请选择付款银行', prop: 'bankName', model: 'bankName', style: 'ivu-col-span-24', options: 'bankList' }
      ],
      rules: {
        amount: [
          { required: true, message: '请输入付款金额' },
          { validator: validateAmount, trigger: 'blur' }
        ],
        payDate: [
          { required: true, message: '请选择付款时间' }
        ],
        bankName: [
          { required: true, message: '请选择付款银行' }
        ],
      },
      arrListDown: {
        bankList: []
      },
      isCanSubmit: true,
      salaryParams: {
        salaryMonth: null,
        customerGUID: null,
        customerName: null,
        sendDate: null
      },
      socialSecurityParams: {
        periodYear: null,
        periodMonth: null,
        securityNo: null,
        socialSecurityNo: null,
        total: null,
        payableTotal: null
      },
      providentFundParams: {
        periodYear: null,
        periodMonth: null,
        securityNo: null,
        providentFundNo: null,
        total: null,
        payableTotal: null
      },
      commercialParams: {
        periodYear: null,
        periodMonth: null,
        securityNo: null,
        commercialNo: null,
        total: null,
        payableTotal: null
      },
      modalType: null
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowPayModal = false
    },

    show () {
      this.$refs.formData.resetFields()
      this.isCanSubmit = true
      this.isShowPayModal = true
    },

    // 时间选择控件
    handleChangeDatePicker (model, value) {
      this.formData[model] = value
      var timeArr = value.split('-')
      this.formData.periodYear = timeArr[0]
      this.formData.periodMonth = timeArr[1]
    },

    // // 获取银行账号下拉列表
    // async getBankList() {
    //   var params = {
    //     organizationName: this.organizationName,
    //     HasPaging: true,
    //     PageIndex: 1,
    //     PageSize: 100
    //   }
    //   let res = await OrganizationBankApi.getList(params)
    //   console.log("获取银行账号下拉列表res: ", res)
    //   if (res.status === 200 && res.data.success) {
    //     this.arrListDown.bankList = res.data.data
    //   } else {
    //   }
    //   this.loading = false
    // },

    // 获取银行账号下拉列表
    async getBankList() {
      var params = {
        id: JSON.parse(localStorage.getItem('clientLoginInfo')).data.companyId
      }
      let res = await OrganizationBankApi.getBankList(params)
      console.log("获取银行账号下拉列表res: ", res)
      if (res.status === 200 && res.data.success) {
        this.arrListDown.bankList = res.data.data
      } else {
      }
      this.loading = false
    },

    // 校验并获取当前工资总额
    async checkConfirmPay () {
      var params = {
        Amount: this.formData.amount,
        PayDate: this.formData.payDate,
        BankName: this.formData.bankName
      }
      var mergeParams = {}
      var serverApi
      if (this.modalType === 'salary') {
        serverApi = SalaryPayableBillApi
        mergeParams = {...params, ...this.salaryParams}
      } else if (this.modalType === 'socialSecurity') {
        this.socialSecurityParams.securityNo = this.socialSecurityParams.socialSecurityNo
        this.socialSecurityParams.payableTotal = this.socialSecurityParams.total
        mergeParams = {...params, ...this.socialSecurityParams}
        serverApi = SocialSecurityPayableBillApi
      } else if  (this.modalType === 'providentFund') {
        this.providentFundParams.securityNo = this.providentFundParams.providentFundNo
        this.providentFundParams.payableTotal = this.providentFundParams.total
        mergeParams = {...params, ...this.providentFundParams}
        serverApi = ProvidentFundPayableBillApi
      } else if  (this.modalType === 'commercial') {
        this.commercialParams.securityNo = this.commercialParams.commercialNo
        this.commercialParams.payableTotal = this.commercialParams.total
        mergeParams = {...params, ...this.commercialParams}
        serverApi = CommercialPayableBillApi
      }

      serverApi.checkConfirmPay(mergeParams).then(res => {
        if (res.data.data) {
          if (res.data.success) {
            this.formData.amount = res.data.data
            this.queryAmount = res.data.data
            this.isShowPayModal = true
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 10,
              closable: true
            })          
            this.formData.amount = res.data.data
          }
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
          this.isShowPayModal = false
        }
      })
    },

    // 工资付款确认
    async confirmPay () {
      var params = {
        Amount: this.formData.amount,
        PayDate: this.formData.payDate,
        BankName: this.formData.bankName
      }
      var mergeParams = {}
      var serverApi
      if (this.modalType === 'salary') {
        serverApi = SalaryPayableBillApi
        mergeParams = {...params, ...this.salaryParams}
      } else if (this.modalType === 'socialSecurity') {
        this.socialSecurityParams.securityNo = this.socialSecurityParams.socialSecurityNo
        this.socialSecurityParams.payableTotal = this.socialSecurityParams.total
        mergeParams = {...params, ...this.socialSecurityParams}
        serverApi = SocialSecurityPayableBillApi
      } else if  (this.modalType === 'providentFund') {
        this.providentFundParams.securityNo = this.providentFundParams.providentFundNo
        this.providentFundParams.payableTotal = this.providentFundParams.total
        mergeParams = {...params, ...this.providentFundParams}
        serverApi = ProvidentFundPayableBillApi
      } else if  (this.modalType === 'commercial') {
        this.commercialParams.securityNo = this.commercialParams.commercialNo
        this.commercialParams.payableTotal = this.commercialParams.total
        mergeParams = {...params, ...this.commercialParams}
        serverApi = CommercialPayableBillApi
      }

      this.$refs.formData.validate((valid) => {
        if (valid) {
          serverApi.confirmPay(mergeParams).then(res => {
            if (res.status === 200 && res.data.success) {
              this.$Message.success(res.data.message)
              this.$emit('query')
              this.isShowPayModal = false
            } else {
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scope>
</style>
